<template>
	<div class="housedt_main">
		<div class="mesg_tit">客户信息</div>
		<div class="main_pdlr10">
			<div class="list_mesgall clearfix" >
				<div class="line_list clearfix" >
					<span class="line_listtit fl">姓名：</span>
					<div class="line_listinput" >
						{{name}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">性别：</span>
					<div class="line_listinput">
						{{sex}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">联系电话：</span>
					<div class="line_listinput">
						{{phone}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">身份证</span>
					<div class="line_listinput">
						{{idcard}}
					</div>
				</div>

			</div>
			<!-- gm房屋信息详情-accordion添加实现手风琴效果gm -->
			<div class="tabs_box">
				<el-collapse>
					<el-collapse-item  v-model="tabsNames">
					    <template slot="title">
					      <div class="tabs_headtit">房屋信息</div>
					    </template>
					    <div class="">
					    	<el-table
						        :data="houseTable"
						        stripe
						        border
						        style="width: 100%" 
										v-loading="loadingHouse">
						        <el-table-column
						          type='index'
						          label="序号"
						          align='center'
						          width="50">
						        </el-table-column>
						        <el-table-column
						          prop="address"
						          label="房屋地址"
						          >
						        </el-table-column>
						        <el-table-column
						          prop="deviceCount"
						          label="设备数"
						          width="100">
						        </el-table-column>
						      </el-table>
						      
						      <div class="block">
						        <el-pagination
						          @size-change="handleSizeChangeHouseList"
							        @current-change="handleCurrentChangeHouseList"
							        :current-page.sync="currentPageHouseList"
							        :page-sizes="[5, 10, 20, 30]"
							        :page-size="pageSizeHouseList"
							        layout="sizes, prev, pager, next"
							        :total="totalHouseList">
						        </el-pagination>
						      </div>
					    </div>

					</el-collapse-item>
					<el-collapse-item v-model="tabsNamesSecond">
						<template slot="title">
					      <div class="tabs_headtit">沟通记录</div>
					    </template>
					    <div class="">
					    	<el-table
						        :data="communicationTable"
						        stripe
						        border
						        style="width: 100%" 
										v-loading="loading">
						        <el-table-column
						          type='index'
						          label="序号"
						          align='center'
						          width="50">
						        </el-table-column>
						        <el-table-column
						          prop="communicationTypeName"
						          label="沟通类别"
						          width="120">
						        </el-table-column>
						        
						        
						        <el-table-column
						          prop="desc"
						          label="沟通内容">
						        </el-table-column>
						      	<el-table-column
						          prop="gmtCreate"
						          label="沟通时间"
						          width="120">
						        </el-table-column>
						      </el-table>
						      
						      <div class="block">
						        <el-pagination
						          @size-change="handleSizeChangeCommunicationRecord"
							        @current-change="handleCurrentChangeCommunicationRecord"
							        :current-page.sync="currentPageCommunicationRecord"
							        :page-sizes="[5, 10, 20, 30]"
							        :page-size="pageSizeCommunicationRecord"
							        layout="sizes, prev, pager, next"
							        :total="totalCommunicationRecord">
						        </el-pagination>
						      </div>
					    </div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		
	</div>

</template>

<script>
import { 
	getCustomerById, 
  	getHouseList, 
	getCommunicationRecordList } from '@/api'
	export default{
		data(){
			return{
				tabsNames:"设备信息",//底部折叠打开的
				tabsNamesSecond:'沟通记录',
				name:"",
				sex:"",
				phone:"",
				idcard:"",
				houseTable:[],
				//沟通表格内容(时间戳)
				communicationTableDate:[],
				loading: true,
				loadingHouse: true,
				totalHouseList: null,// 分页总条数
				pageSizeHouseList:10, //当前分页一页多少条数
				currentPageHouseList:1,//当前页数
				totalCommunicationRecord: null,// 分页总条数
				pageSizeCommunicationRecord:10, //当前分页一页多少条数
				currentPageCommunicationRecord:1,//当前页数
				clientInfoId: '', // id =》 查看谁家的房屋（具体信息）
			}
		},
		created () {
			this.clientInfoId = this.$route.query.id
			let params = {
				page: '',
				size: '',
				clientInfoId: this.clientInfoId
			}
			let paramsList = {
				houseId: '',
				customerId: this.clientInfoId,
				page:this.currentPageCommunicationRecord,
				size:this.pageSizeCommunicationRecord
			}
			let paramsHouseList = {
				customerId: this.clientInfoId,
				page:this.currentPageHouseList,
				size:this.pageSizeHouseList
			}
			//console.log(paramsHouseList.customerId)
			this.CustomerById(params)
			this.CommunicationRecordList(paramsList)
			this.HouseList(paramsHouseList)
		},
		methods: {
			getDate (item) {
				var date =  new Date(item);
				var y = 1900+date.getYear();
				var m = "0"+(date.getMonth()+1);
				var d = "0"+date.getDate();
				return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length)
			},
			CustomerById(params) {
				getCustomerById(params).then(res => {
					let code = res.data.code
					if (code == 0) {
						let data = res.data.data
						this.name = data.clientName
						this.phone = data.phone
						this.sex = data.sexName
						this.idcard = data.idCard
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			HouseList (params) {
				getHouseList(params).then(res => {
					let code = res.data.code
					if(code == 0) {
						let data = res.data.data
						this.totalHouseList = data.pageInfo.total
						this.houseTable = data.list
						this.loadingHouse= false
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			CommunicationRecordList(params) {
				getCommunicationRecordList(params).then(res => {
					let code = res.data.code
					if(code == 0) {
						let data = res.data.data
						this.totalCommunicationRecord = data.pageInfo.total
						// data.list.map((item, index) => {
						// 	this.getDate(item)
						// })
						this.communicationTableDate = data.list
						this.loading = false
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChangeHouseList (val) { //改变每页的条数--房屋
				this.pageSizeHouseList = val;
				this.currentPageHouseList = 1
				let params = {
					customerId: this.clientInfoId,
					page: this.currentPageHouseList,
					size: this.pageSizeHouseList
		    }
		    	this.HouseList(params);//调用查询接口
		  },
			handleCurrentChangeHouseList (val) { //改变当前页--房屋
			  this.currentPageHouseList = val
				let params = {
					customerId: this.clientInfoId,
					page: this.currentPageHouseList,
					size: this.pageSizeHouseList
				}
				this.HouseList(params);//调用查询接口
			},
			handleSizeChangeCommunicationRecord (val) { //改变每页的条数--沟通记录
				this.pageSizeCommunicationRecord = val;
				this.currentPageCommunicationRecord = 1
				let params = {
				  customerId: this.clientInfoId,
					houseId: '',
				  page: this.currentPageCommunicationRecord,
				  size: this.pageSizeCommunicationRecord
				}
				this.CommunicationRecordList(params);//调用查询接口
			},
			handleCurrentChangeCommunicationRecord (val) { //改变当前页--沟通记录
				this.currentPageCommunicationRecord = val
				let params = {
				  customerId: this.clientInfoId,
					houseId: '',
				  page: this.currentPageCommunicationRecord,
				  size: this.pageSizeCommunicationRecord
				}
				this.CommunicationRecordList(params);//调用查询接口
			}
		},
		computed: {
			communicationTable() {
				return this.communicationTableDate.map(v => {
					return {
						communicationRecordId: v.communicationRecordId,
						communicationTypeId: v.communicationTypeId,
						communicationTypeName: v.communicationTypeName,
						desc: v.desc,
						gmtCreate: this.getDate(v.gmtCreate)
					}
				})
			}
		}
	};
</script>

<style scoped>
	.tabs_box .tabs_headtit{padding-left:15px;}
	.tabs_box .el-collapse-item{margin-bottom:20px;border:0 !important;}
	.tabs_box .el-collapse{border:0 !important;}
	.el-collapse-item__wrap{border-color:#fff !important;}
</style>